<meta charset="UTF-8">
<style>
    html,body {
        padding: 0;
        margin: 0;
        background: url(./1.webp) center/100% no-repeat;
    }
    p{
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        font-size: 40px;
    }
    div{
        width: 100%;
        text-align: center;
    }
</style>
<div>
<p>猩猩</p>


</div>
<script>

setInterval('createsong()',2500)

function createsong(){


    var imgObj1 = document.createElement('img')

    imgObj1.src = './2.jpeg'
    var  nowWidth = Math.floor(Math.random()*(80-50+1)+50)
 
    imgObj1.style.width = nowWidth +'px'

    var maxLeft = (window.innerWidth || document.documentElement.clientWidth)- nowWidth
    var maxTop = (window.innerHeight || document.documentElement.clientHeight)- nowWidth


    imgObj1.style.position = 'absolute'
    imgObj1.style.left = Math.floor(Math.random()*(maxLeft-0+1)+0) + 'px'
    imgObj1.style.top = Math.floor(Math.random()*(maxTop-0+1)+0) + 'px'


    document.body.appendChild(imgObj1)

  
}

document.body.addEventListener('click',function(evt){

    var e = evt || window.event
    if(e.target.nodeName =='IMG')this.removeChild(e.target)
})

// 点击 
document.querySelector('#btn1').onclick = function(){
    createsong()
}

//清空 BUG我removeChild用不明白   只能改变图片大小  像个lowB
document.querySelector('#btn2').onclick = function(evt){
    let imgObjs = document.querySelectorAll('img')
    
    imgObjs.forEach(function(item,i){
        console.log(item)
       item.style.width = `${0}px`
    })
}
</script>